<template>
    <el-dialog :model-value="dialogState" :title="config.title" @close="closeDialog">
        <createForm :config="formConfig" :defaultForm="config.row" />
    </el-dialog>
</template>

<script setup>
import { toRefs, watch } from 'vue'
import createForm from '@/jsx/createForm.jsx';

const props = defineProps({
    dialogState: {
        type: Boolean,
        required: true
    },
    dialogConfig: {
        type: Object,
        required: true
    },
    formConfig: {
        type: Object,
        required: true
    }
})

const { dialogState, dialogConfig: { value: config }, formConfig } = toRefs(props)

const emits = defineEmits(['update:dialogState'])

const closeDialog = () => { emits('update:dialogState', false) }
</script>

<style lang='scss' scoped>
.el-form {
    width: 90%;
    margin: 0 auto;
}
</style>